<!--
/**
* Author: zyf
* Date: 2021-04-08 14:17
* Desc: DiscountCell
*/
-->

<template>
  <view class="discount-cell flex flex-m">
    <view class="flex flex-m discount-left">
      <view class="icon-sepcial bc-primary flex flex-c-m">
        <zm-image is-join :src="icon" width="27rpx" height="32rpx"></zm-image>
      </view>
      <view class="discount-cell__title">{{ name }}</view>
    </view>
    <view
      class="discount-cell__content"
      :class="yellow ? 'discount-cell__yellow' : ''"
      >¥<span class="discount-cell__price">{{ price }}</span
      ><span v-if="yellow" class="discount-cell__mark fc8">起</span></view
    >
    <view
      v-if="hasBtn"
      @click="handleClick"
      class="fs26 flex flex-c-m bc-primary btn"
      :class="{ 'disable-btn': isFull }"
      >{{ isFull ? '满座' : '购买' }}</view
    >
  </view>
</template>

<script>
  import zmImage from '@/commons/ZmImage'
  export default {
    name: 'DiscountCell',
    props: {
      icon: String,
      name: String,
      price: [String, Number],
      hasBtn: Boolean,
      yellow: Boolean,
      isFull: Boolean
    },
    components: {
      zmImage
    },
    data() {
      return {}
    },
    methods: {
      handleClick() {
        !this.isFull ? this.$emit('clickBuy') : ''
      }
    }
  }
</script>
<style lang="scss" scoped>
  .discount-cell {
    background: #f6feff;
    padding: 16rpx;
    box-sizing: border-box;
    margin-bottom: 12rpx;

    .icon-sepcial {
      width: 42rpx;
      height: 42rpx;
      border-radius: 50%;
      margin-right: 14rpx;
    }
    .discount-left {
      width: 58%;
    }
    &__title {
      font-size: 28rpx;
      color: #333;
    }
    &__content {
      // min-width: 140rpx;
      text-align: left;
      position: relative;
      font-size: 24rpx;
      padding-right: 26rpx;
      // margin-right: 40rpx;
      color: #9c9c9c;
    }
    &__price {
      font-size: 32rpx;
      font-weight: bold;
    }
    &__yellow {
      color: $yellow !important;
    }
    &__mark {
      // position: absolute;
      // right: 0;
      // top: 50%;
      // transform: translateY(-50%);
    }
    .btn {
      width: 110rpx;
      height: 56rpx;
      color: #fff;
      margin-left: auto;
      border-radius: 20rpx;
    }
    .disable-btn {
      background: #e0e0e0 !important;
    }
  }
</style>
